<template>
  <el-dialog class="lineDialog" :title="title" v-model="open" width="680px" append-to-body>
    <!-- 时间选择 -->
    <div class="dataTime">
      <span class="time">时间选择</span>
      <el-date-picker
        v-model="dateTime"
        type="daterange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD"
        :shortcuts="shortcuts"
        @change="getList"
      />
    </div>
    <!-- 数值 -->
    <div ref="lineDialogRef" style="height: 440px;"></div>
    <!-- 数据 -->
    <ul class="ul">
      <li>
        <span>能级</span>
        <em>123</em>
        <span>MHz</span>
      </li>
      <li>
        <span>量子传感电场值</span>
        <em>543</em>
        <span>V/m</span>
      </li>
    </ul>
  </el-dialog>
</template>

<script setup name="LineDialog">
import { ref, reactive, nextTick } from 'vue'
import * as echarts from "echarts"

import { ShowDate, shortcutsData } from '@/utils/index'
const { proxy } = getCurrentInstance();
import { getPreviousTimesByInterval } from "@/utils/index"


const dateTime = ref([ShowDate(30), ShowDate(0)])

const data = reactive({
  shortcuts:shortcutsData()
})

const { shortcuts } = toRefs(data);


// 获取节点
let lineDialogRef = ref();

const title = ref("");
const open = ref(false);
/** 开关 */
function init() {
  title.value = '历史局放时域数据';
  open.value = true;
  nextTick(() => {
    myChartsFun()
  })
}
//获取实时数据
function updateTime() {
  myChartsFun()
}

onMounted(() => {
  // updateTime(); // 1s = 1000ms, 10s = 100000
  // 每隔1分钟执行一次updateTime函数
  const intervalId = setInterval(updateTime, 5000);
  // 将 intervalId 保存起来，以便在组件卸载时清除定时器
  window['intervalId'] = intervalId;
  // init()
})

const myChartsFun = () => {
  //获取echarts实例
  const myCharts = echarts.init(lineDialogRef.value);
  const { times, randomNum } = getPreviousTimesByInterval(1, 50);
  myCharts.setOption({
    // 标题
    tooltip: {
      trigger: 'axis', // 触发类型：坐标轴触发
      axisPointer: {
        type: 'line' // 指示器类型：直线指示器
      }
    },
    title: {
      text: "能级值(MHz)",
      textStyle: {
        color: "#fff",
        fontSize:14,
        fontWeight: "normal",
      },
    },
    xAxis: {
      type: 'category',
      data: times, 
      boundaryGap: false,
      axisTick: {
        show: true,    // 是否显示坐标轴刻度
        lineStyle: {
          width: 1, // 设置加粗的宽度
          color: "#0c8cab" // 设置颜色渐变
        }
      },
      axisLine: {
        show: true, // 是否显示坐标轴轴线
        lineStyle: {
          width: 2, // 设置加粗的宽度
          color: "#143d53" // 设置颜色渐变
        }
      },
      axisLabel: {
        color: "#fff",
        fontSize:'16',
      }
    },
    yAxis: {
      color:'#fff',
      type: 'value',
      axisLabel: {
        formatter: '{value}',
        color: "#fff",
        fontSize:'16',
      },
      splitLine:{
        lineStyle:{
          type: 'dashed', //网格为虚线
          color: '#0c8cab'
        }
      },
      axisLine: {
        show: true, // 是否显示坐标轴轴线
         lineStyle: {
          width: 2, // 设置加粗的宽度
          color: "#143d53" // 设置颜色渐变
        }
      }
    },
    grid: {
      left: "0%",
      right: "4%",
      bottom: "6%",
      top:"10%",
      containLabel: true,
    },
    series: [
      {
        data: randomNum,
        type: 'line',
        symbolSize: 6, // 设置标记的大小
        color:["#3980da"],
        lineStyle: { color: '#3980da', width: 2 },
        // 数值展示
        label:{
          show: true, // 是否展示
          position: 'top', // 展示位置
          color: '#fff', // 展示颜色
          fontSize: 16, // 展示文字大小
          formatter: '{c}', // 展示文字格式
        }
      }
    ],
    dataZoom: [
      {
        orient:"horizontal",
        show: true,//控制滚动条显示隐藏
        realtime: true, //拖动滚动条时是否动态的更新图表数据
        height: 10, //滚动条高度
        start: 0, //滚动条开始位置（共100等份）
        end: 100,//滚动条结束位置
        bottom: "1%",
        zoomLock: true, //控制面板是否进行缩放
      },
      {
        type: "inside",
        brushSelect: true,
        start: 0,
        end: 100,
        xAxisIndex: [0],
      }
    ]
    // dataZoom: [
      // {
      //   type: 'slider',
      //   show: true,// 设置组件控制的y轴
      //   yAxisIndex: 0,
      //   width: 12,
      //   backgroundColor: '#fff',// 组件的背景颜色
      //   fillerColor: '#ededed',// 选中范围的填充颜色
      //   borderColor: '#D4D1D1',// 边框颜色
      //   showDetail: false,// 是否显示detail，即拖拽时候显示详细数值信息
      //   handleSize: 14,// 控制手柄的尺寸
      //   showDataShadow: false,// 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
      // },
      // {
      //   type: 'inside',
      //   yAxisIndex: [0],
      //   zoomOnMouseWheel: true,// 不按任何功能键，鼠标滚轮能触发缩放
      //   moveOnMouseWheel: true// 不按任何功能键，鼠标移动能触发数据窗口平移
      // }
    // ]
  })
}

const getList= () => {
  proxy.$modal.msgSuccess("选择成功");
}

defineExpose({
  init
});
</script>

<style lang='scss' scoped>
.ul{
  width: 100%;
  height: 100%;
  padding-left: 5%;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  li{
    font-size: 20px;
    color: #eee;
    em{
      font-weight: 600;
      color: #fff;
      margin: 0 6px;
      font-style:normal;
      font-size: 40px;
      // border-bottom: 1px solid #0c8cab;
    }
  }
}

.dataTime{
  // display: flex;
  text-align: right;
  margin-bottom: 10px;
  // background: red;
  span{
    color: #fff;
    margin-right: 10px;
  }
  // ::v-deep(.el-range-editor.el-input__wrapper){
  //   background: transparent;
  // }
}
</style>